<template>
  <MdEditor v-model="content" :theme="isDark ? 'dark' : 'light'" @on-upload-img="handleUploadImg" />
</template>

<script lang="ts">
import 'md-editor-v3/lib/style.css';
import { MdEditor } from 'md-editor-v3';
import { useDarkStore } from '@/stores/darkStore';

export default defineComponent({
  name: 'MarkdownEditor',
  components: { MdEditor },
  props: {
    modelValue: {
      type: String,
      required: true
    }
  },
  emits: ['update:modelValue', 'onUploadImg'],
  setup(props, { emit }) {
    const darkStore = useDarkStore();
    const isDark = computed(() => darkStore.isDark);

    const content = ref<string>(props.modelValue);

    // 上传图片
    const handleUploadImg = (files: File[], callback: Function): void => {
      emit('onUploadImg', files, callback);
    };

    watch(content, (val: string) => {
      emit('update:modelValue', val);
    });

    return {
      isDark,
      content,
      handleUploadImg
    };
  }
});
</script>
